<template>
<!--  <main>-->
    <div class="common-layout">
      <el-container>
        <el-header class="my_h">
          <el-radio-group v-model="isCollapse" style="justify-content: center">
            <el-radio-button :label="false">expand</el-radio-button>
            <el-radio-button :label="true">collapse</el-radio-button>
          </el-radio-group>

          <el-dropdown>
            <span class="el-dropdown-link">
               {{store.state.employee.userinfo.name}}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu style="width: 120px">
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="outLogFn">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <button @click="testFn">测试</button>
        </el-header>

        <el-container>

          <el-menu
              default-active="0"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              @open="handleOpen"
              @close="handleClose"
              :router=true
          >

            <el-menu-item v-for="(item, index) in router.options.routes[0].children" :index=String(index) :route=item>
              <el-icon>
                <component v-if="item.meta.icon" :is="item.meta.icon"></component>
              </el-icon>

              <template #title>{{item.meta.name}}</template>
            </el-menu-item>

          </el-menu>

          <div>
            <router-view></router-view>
          </div>
        </el-container>

      </el-container>
    </div>
<!--  </main>-->
</template>


<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useStore } from 'vuex'
import { ref } from 'vue'

 const router = useRouter()
 const route = useRoute()
 const store = useStore()

const isCollapse = ref(true)
const handleOpen = (key , keyPath) => {
  console.log(111)
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
  const testFn = ()=>{
    console.log(router.options.routes[0].children)
 }
 const outLogFn = ()=>{
   store.commit("employee/removeUserinfo")
   router.push("/login")
 }
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

el-container{
  height: 100% !important;
}
 .my_h {
   display: flex;
   //justify-content: center;
   align-items: center;
   height: 70px;
   background-color: #debda3;
   color: black !important;
 }
 .my_a {
   width: 200px;
   height: 100%;
   background-color: #695c5c;
 }

 .my_m {
   width: 100%;
   height: 100%;
   background-color: #709ca4;
 }
 .common-layout {
   height: 100% !important;
 }
 .el-container {
   height: 100% !important;
 }
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown{
  margin-left: 100px;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 30px;
  color: black;
  background-color: #fff;
  font-weight: 700;
}
</style>


